<template>
<div class="orders-wrapper">
  <div class="header">
    <div class="header-content">
      <div class="title-section">
        <h2>订单列表</h2>
        <div class="order-count">
          <el-tag type="info" effect="plain">{{ orderList.length }} 个订单</el-tag>
        </div>
      </div>
    </div>
  </div>
  <div class="orders-container">
    <div v-for="order in orderList" :key="order.id" class="order-card">
      <div class="card-inside">
        <div class="card-header">
          <div class="header-left">
            <h3>{{ order.roomName }}</h3>
            <div class="order-id">订单号: {{ order.id }}</div>
          </div>
          <div class="header-right">
            <div class="amount">¥{{ order.amount }}</div>
          </div>
        </div>
        <div class="card-content">
          <div class="info-item">
            <el-icon><Calendar /></el-icon>
            <span>预约日期: {{ order.bookingDate }}</span>
          </div>
          <div class="info-item">
            <el-icon><Timer /></el-icon>
            <span>开始时间: {{ order.startHour }}</span>
          </div>
          <div class="info-item">
            <el-icon><Timer /></el-icon>
            <span>结束时间: {{ order.endHour }}</span>
          </div>
          <div class="info-item">
            <el-icon><User /></el-icon>
            <span>参与人数: {{ order.participants }}人</span>
          </div>
        </div>
        <div class="card-footer">
          <div class="footer-left">
            <el-tag :type="getStatusTagType(order.status)" class="status-tag">
              {{ getStatusText(order.status) }}
            </el-tag>
          </div>
          <div class="footer-right">
            <el-button 
              v-if="order.status === 'not_paid'" 
              type="primary" 
              class="action-button"
              @click="handlePay(order)"
            >
              <el-icon><Money /></el-icon>
              支付
            </el-button>
            <el-button 
              v-if="order.status === 'not_paid'" 
              type="danger" 
              class="action-button"
              @click="handleCancel(order)"
            >
              <el-icon><Close /></el-icon>
              取消
            </el-button>
            <el-button 
              v-if="order.status === 'confirmed'" 
              type="danger" 
              class="action-button"
              @click="handleRefund(order)"
            >
              <el-icon><Back /></el-icon>
              退款
            </el-button>
            <el-button 
              v-if="order.status === 'refunding'" 
              type="success" 
              class="action-button"
              @click="handleConfirmRefund(order)"
            >
              <el-icon><Check /></el-icon>
              确认退款
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useOrderStore } from '../stores/OrderStore'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../stores/UserStore'
import { 
  Calendar, 
  Timer, 
  User, 
  Money, 
  Close, 
  Back, 
  Check 
} from '@element-plus/icons-vue'

const userStore = useUserStore()
const orderStore = useOrderStore()
const orderList = ref([])

const getStatusText = (status) => {
  const statusMap = {
    'not_paid': '未支付',
    'pending': '退款审核中',
    'confirmed': '已确认',
    'cancelled': '已取消',
    'refunded': '已退款'
  }
  return statusMap[status] || status
}

const getStatusTagType = (status) => {
  const tagTypeMap = {
    'not_paid': 'info',
    'pending': 'warning',
    'confirmed': 'success',
    'cancelled': 'danger',
    'refunded': 'primary'
  }
  return tagTypeMap[status] || 'default'
}

const fetchOrderList = async () => {

  const userId =  userStore.userId
  orderList.value = await orderStore.getOrderList(userId) 
}

const handlePay = async (order) => {
  try {
    // 调用支付接口，传入订单ID
    await orderStore.payOrder(order.id)
    await fetchOrderList() // 刷新订单列表以显示更新状态
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const handleCancel = async (order) => {
  try {
    // 调用取消接口
    await orderStore.cancelOrder(order.id)
    await fetchOrderList() // 刷新订单列表以显示更新状态
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const handleRefund = async (order) => {
  try {
    // 调用退款接口
    await orderStore.refundOrder(order.id)
    await fetchOrderList() // 刷新订单列表以显示更新状态
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const handleConfirmRefund = async (order) => {
  try {
    // 调用确认退款接口
    await orderStore.confirmRefund(order.id)
    await fetchOrderList() // 刷新订单列表以显示更新状态
  } catch (error) {
    ElMessage.error(error.message)
  }
}

onMounted(async () => {
   await fetchOrderList()
})

</script>

<style scoped>
.orders-wrapper {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  position: relative;
}

.header {
  position: fixed;
  top: 0;
  left: 240px;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.header-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header h2 {
  margin: 0;
  font-size: 24px;
  color: #1a237e;
  font-weight: 600;
  background: linear-gradient(90deg, #1a237e 0%, #3949ab 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.order-count {
  display: flex;
  align-items: center;
}

.orders-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 24px;
  margin-top: 80px;
  max-width: 1600px;
  margin-left: 20px;
  margin-right: auto;
}

.order-card {
  background: white;
  border-radius: 16px;
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.order-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.card-inside {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  padding: 24px;
  background: linear-gradient(135deg, #3949ab 0%, #5c6bc0 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.card-header::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  transform: translate(30%, -30%);
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-left h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.order-id {
  font-size: 13px;
  opacity: 0.8;
}

.header-right {
  text-align: right;
}

.amount {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-content {
  padding: 24px;
  flex: 1;
  background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #546e7a;
  font-size: 14px;
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateX(4px);
  color: #3949ab;
}

.info-item .el-icon {
  color: #3949ab;
  font-size: 18px;
  transition: all 0.3s ease;
}

.info-item:hover .el-icon {
  transform: scale(1.1);
}

.card-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  display: flex;
  align-items: center;
}

.footer-right {
  display: flex;
  gap: 12px;
}

.status-tag {
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 13px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: none;
}

.action-button .el-icon {
  font-size: 16px;
}

.el-button--primary {
  background: linear-gradient(90deg, #3949ab 0%, #5c6bc0 100%);
  box-shadow: 0 4px 12px rgba(57, 73, 171, 0.2);
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(57, 73, 171, 0.3);
}

.el-button--danger {
  background: linear-gradient(90deg, #d32f2f 0%, #ef5350 100%);
  box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
}

.el-button--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.3);
}

.el-button--success {
  background: linear-gradient(90deg, #2e7d32 0%, #43a047 100%);
  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
}

.el-button--success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.3);
}

@media (max-width: 1200px) {
  .orders-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .header {
    left: 0;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px;
  }

  .title-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .orders-container {
    grid-template-columns: 1fr;
    padding: 16px;
    margin-top: 120px;
    margin-left: 16px;
    margin-right: 16px;
  }

  .card-footer {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .footer-left {
    justify-content: center;
  }

  .footer-right {
    flex-direction: column;
  }

  .action-button {
    width: 100%;
    justify-content: center;
  }
}
</style>